<template>
  <div>
    <el-card class="box-card">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getExportDispatchList()"
        class="dadeFrom"
      >
        <el-select
          v-model="dataForm.status"
          placeholder="推送状态"
          clearable
          style="width: 200px"
        >
          <el-option label="未推送" value="0"></el-option>
          <el-option label="已推送" value="1"></el-option>
        </el-select>
        <el-select
          v-model="dataForm.company"
          placeholder="推送标签"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="option in latnIdList"
            :key="option.id"
            :label="option.dictName"
            :value="option.id"
          >
          </el-option>
        </el-select>
        <el-input
          v-model="dataForm.sendTitle"
          placeholder="请输入推送标题"
          style="width: 200px"
        ></el-input>
        <el-date-picker
          v-model="dataForm.timeVal"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
        <el-button @click="searchData()" type="primary">查询</el-button>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top: 10px">
      <el-button type="success" size="mini" @click="handleAdd">新增</el-button>
      <el-button type="danger" size="mini" @click="handleDelete()"
        >批量删除</el-button
      >
      <el-table
        :data="dataList"
        style="width: 100%; margin-top: 20px"
        @selection-change="handleSelectionChange"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(12,42,98, 0.9)"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column type="index" label="序号" align="center" width="60">
        </el-table-column>
        <el-table-column prop="headline" label="推送标题" align="center">
        </el-table-column>
        <el-table-column label="推送状态" align="center" width="240">
          <template slot-scope="scope">
            <span
              class="green el-tag el-tag-warn"
              v-if="scope.row.sendStatus == 1"
              >已推送</span
            >
            <span class="red el-tag el-tag-red" v-if="scope.row.sendStatus == 0"
              >未推送</span
            >
            <div v-if="scope.row.isOneSend == 0">
              <span v-if="scope.row.sendTimeType == 17">
                (每日：{{ scope.row.sendTime }})
              </span>
              <span v-if="scope.row.sendTimeType == 19">
                (每月：{{ scope.row.sendTime.slice(8, 10) }}日
                {{ scope.row.sendTime.slice(11, scope.row.sendTime.length) }})
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="sendTagName"
          label="推送标签"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="content" label="推送内容" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" align="center">
        </el-table-column>
        <el-table-column label="已读/发送数量" width="120" align="center">
          <template slot-scope="scope">
            <span style="">
              <span class="green">{{ scope.row.readCount }}</span
              >/{{ scope.row.sendCount }}
              <!-- <span class=""></span> -->
              <!-- {{scope.row.readCount}}/{{scope.row.totalCount}} -->
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="320">
          <template slot-scope="scope">
            <!-- :disabled="scope.row.status == 1" -->

            <el-button
              size="mini"
              type="warning"
              @click="handlePushPerson(scope.row.id)"
              v-if="scope.row.isOneSend == 1"
              :disabled="scope.row.sendStatus == 1"
              >推送</el-button
            >
            <el-button
              size="mini"
              type="warning"
              @click="handleOpenOrClose(scope.row.id, 1)"
              v-if="scope.row.isOneSend == 0 && scope.row.status == 0"
              >开启</el-button
            >
            <el-button
              size="mini"
              type="warning"
              @click="handleOpenOrClose(scope.row.id, 0)"
              v-if="scope.row.isOneSend == 0 && scope.row.status == 1"
              >关闭</el-button
            >
            <el-button
              size="mini"
              type="success"
              @click="
                handleDetails(
                  scope.row.id,
                  scope.row.readCount,
                  scope.row.sendCount
                )
              "
              >详情</el-button
            >
            <el-button
              type="primary"
              size="mini"
              :disabled="scope.row.sendStatus == 1"
              @click="handleEdit(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        :pageNum="pageNum"
        :pageSize="pageSize"
        @pageChange="pageChange"
      />
    </el-card>

    <!-- 弹窗, 新增 / 修改 -->
    <el-dialog title="填写信息" :visible.sync="dialogVisible" width="40%">
      <el-form ref="form" label-width="100px">
        <el-form-item label="是否单次推送">
          <el-radio-group v-model="pushValue" @change="handleIsCycleShow()">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="推送周期" v-if="isCycle">
          <el-select
            v-model="cycle"
            placeholder="请选择推送周期"
            style="width: 150px"
            @change="handleCycle()"
          >
            <el-option label="日" value="17"></el-option>
            <el-option label="月" value="19"></el-option>
          </el-select>
          <el-time-picker
            v-if="isTimeShow"
            style="width: 120px"
            v-model="timeValue"
            :picker-options="{
              selectableRange: '00:00:00 - 23:59:00',
            }"
            value-format="HH:mm:ss"
            placeholder="选择时间"
          >
          </el-time-picker>
          <el-date-picker
            v-if="isDateTimeShow"
            v-model="timeValue"
            type="datetime"
            value-format="yyyy:MM:dd:HH:mm:ss"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="推送对象">
          <el-select v-model="condition" placeholder="请选择推送对象">
            <el-option
              v-for="option in latnIdList"
              :key="option.id"
              :label="option.dictName"
              :value="option.id + ',' + option.dictName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推送标题">
          <el-input type="title" v-model="titleVal"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="smallTitle" v-model="smallTitle"></el-input>
        </el-form-item>
        <el-form-item label="推送链接">
          <el-select
            v-model="urlVal"
            @change="handleChangeUrl()"
            style="width: 280px"
            placeholder="请推送链接"
          >
            <el-option
              v-for="option in urllist"
              :key="option.id"
              :label="option.dictName"
              :value="option.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推送内容">
          <el-input type="textarea" v-model="desc" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      loading: true,
      dataList: [{ id: 1 }],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      latnIdList: [],
      // urllist: [],
      dataForm: {
        status: "",
        company: "",
        pattern: "",
        timeVal: "",
        sendTitle: "",
      },
      cycle: "17",
      timeValue: "",
      condition: "",
      pushValue: 0,
      titleVal: "",
      smallTitle: "",
      desc: "",
      dialogVisible: false,
      isCycle: true,
      isTimeShow: true,
      isDateTimeShow: false,
      urlVal: "",
      id: null,
      ids: [],
      urllist: [],
    };
  },
  computed: {
    // urllist: {
    //   get(){
    //     return this.$store.state.type.secretary_send_url
    //   }
    // },
    // latnIdList:{
    //   get() {
    //      return this.$store.state.type.user_tag
    //   }
    // }
  },
  created() {
    // this.fetchTableList();
    this.fetchUrlList();
    this.fetchlatnIdList();
  },
  activated: function () {
    this.fetchTableList();
  },

  methods: {
    // 设置每个值都为必填项
    handleChangeUrl() {
      this.desc = this.urlVal;
    },
    fetchUrlList() {
      this.$http({
        url: this.$http.adornUrl("sysdictdata/list"),
        method: "get",
        params: this.$http.adornParams({
          dictType: "secretary_send_url",
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.urllist = data.page.list;
        }
      });
    },
    fetchlatnIdList() {
      this.$http({
        url: this.$http.adornUrl("sysdictdata/list"),
        method: "get",
        params: this.$http.adornParams({
          dictType: "user_tag",
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.latnIdList = data.page.list;
        }
      });
    },
    // 推送
    handlePushPerson(id) {
      let ids = [id];
      this.$confirm(`您确定要推送吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/cpcpsecretary/sendOneMessage"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "推送成功",
                type: "success",
              });
              this.fetchTableList();
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    handleIsCycleShow() {
      this.pushValue === 0 ? (this.isCycle = true) : (this.isCycle = false);
    },
    // 开启或者关闭
    handleOpenOrClose(id, status) {
      let title = status === 1 ? "开启" : "关闭";
      this.$confirm(`您确定要${title}吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/cpcpsecretary/openOrClose"),
            method: "post",
            data: this.$http.adornData({
              id: id,
              status: status,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.fetchTableList();
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    handleDetails(id, readCount, sendCount) {
      this.$router.push({
        path: "/aiDetails",
        query: {
          id,
          readCount,
          sendCount,
        },
      });
    },
    handleCycle() {
      if (this.cycle == "17") {
        this.isTimeShow = true;
        this.isDateTimeShow = false;
      } else {
        this.isTimeShow = false;
        this.isDateTimeShow = true;
      }
    },
    // 保存
    handleSave() {
      if (!this.timeValue && this.pushValue == 0) {
        this.$message.error("请选择推送周期时间");
        return false;
      }
      if (!this.condition) {
        this.$message.error("请选择推送对象");
        return false;
      }
      if (!this.titleVal) {
        this.$message.error("请输入标题");
        return false;
      }
      if (!this.smallTitle) {
        this.$message.error("请输入描述");
        return false;
      }
      if (!this.desc) {
        this.$message.error("请输入选择内容");
        return false;
      }
      if (this.id) {
        this.handleUpdateDic();
      } else {
        this.handleAddDic();
      }
    },
    // 新增
    handleAddDic() {
      let condition = this.condition.split(",");
      this.$http({
        url: this.$http.adornUrl("/cpcpsecretary/save"),
        method: "post",
        data: this.$http.adornData({
          isOneSend: this.pushValue,
          sendTagId: condition[0],
          sendTagName: condition[1],
          sendTime: this.timeValue,
          content: this.desc,
          headline: this.titleVal,
          headlineDes: this.smallTitle,
          sendTimeType: this.cycle,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.fetchTableList();
          this.dialogVisible = false;
        }
      });
    },
    // 修改
    handleUpdateDic() {
      let condition = this.condition.split(",");
      this.$http({
        url: this.$http.adornUrl("/cpcpsecretary/update"),
        method: "post",
        data: this.$http.adornData({
          id: this.id,
          isOneSend: this.pushValue,
          sendTagId: condition[0],
          sendTagName: condition[1],
          sendTime: this.timeValue,
          content: this.desc,
          headline: this.titleVal,
          headlineDes: this.smallTitle,
          sendTimeType: this.cycle,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.fetchTableList();
          this.dialogVisible = false;
        }
      });
    },
    //   新增
    handleAdd() {
      this.dialogVisible = true;
      this.handleIsCycleShow();
      (this.id = null), (this.cycle = "17");
      this.timeValue = "";
      this.condition = "";
      this.titleVal = "";
      this.smallTitle = "";
      this.desc = "";
      this.pushValue = 0;
      this.urlVal = "";
    },
    // 多选
    handleSelectionChange(val) {
      this.ids = [];
      val.map((item) => {
        this.ids.push(item.id);
      });
    },
    // 点击搜索
    searchData() {
      this.fetchTableList();
    },
    // 获取表格数据
    fetchTableList() {
      this.loading = true;
      let { status, company, timeVal, sendTitle } = this.dataForm;
      this.$http({
        url: this.$http.adornUrl("/cpcpsecretary/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageNum,
          limit: this.pageSize,
          sendStatus: status,
          sendTagId: company,
          sendTime: timeVal,
          sendTitle: sendTitle,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          setTimeout(() => {
            this.loading = false;
            this.total = data.page.totalCount;
            this.dataList = data.page.list;
          }, 1000);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //编辑
    handleEdit(id) {
      this.id = id;
      this.$http({
        url: this.$http.adornUrl(`/cpcpsecretary/info/${id}`),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dialogVisible = true;
          this.cycle = data.cpcpSecretary.sendTimeType.toString();
          this.timeValue = data.cpcpSecretary.sendTime;
          this.condition = `${data.cpcpSecretary.sendTagId},${data.cpcpSecretary.sendTagName}`;
          this.titleVal = data.cpcpSecretary.headline;
          this.smallTitle = data.cpcpSecretary.headlineDes;
          this.desc = data.cpcpSecretary.content;
          this.pushValue = data.cpcpSecretary.isOneSend;
          this.urlVal = data.cpcpSecretary.content;
          this.handleIsCycleShow();
        }
      });
    },
    // 删除
    // 点击删除或者批量删除
    handleDelete(id) {
      let ids = [];
      if (id) {
        ids = [id];
      } else {
        ids = this.ids;
        if (ids.length == 0) {
          this.$message.error("请先选择要删除的选项");
          return false;
        }
      }
      this.$confirm(`您确定要删除吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.info(ids);
          let thisdata = this.$http.adornData(ids, false);
          console.info(thisdata);
          this.$http({
            url: this.$http.adornUrl("/cpcpsecretary/delete"),
            method: "post",
            data: thisdata,
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.fetchTableList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 再次提醒
    // 分页
    pageChange(page) {
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      this.fetchTableList();
    },
  },
};
</script>
<style scoped lang="scss">
@import "../../../assets/scss/span_color";
.green {
  color: green;
}
.red {
  color: red;
}
</style>
